@@include('header.htm', {
  "title": "Button Group - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "buttons",
	"active": "button-group"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Button Group</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "button-group"
	})
</div>

<div class="row">
	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Default Button Group</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.6/components/button-group/#basic-example"
						target="_blank"> More Details.</a></p>

				<div class="btn-group" role="group" aria-label="Basic example">
					<button type="button" class="btn btn-primary ">Left</button>
					<button type="button" class="btn btn-primary ">Middle</button>
					<button type="button" class="btn btn-primary ">Right</button>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Outline Square Button Group</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Outline Square Buttons With Dropdown add class <code> .btn-outline-primary</code></p>

				<div class="btn-group" role="group" aria-label="Basic example">
					<button type="button" class="btn btn-outline-primary">Left</button>
					<button type="button" class="btn btn-outline-primary">Middle</button>
					<button type="button" class="btn btn-outline-primary">Right</button>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Icon Button Group</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Icon Button Group add <code> &lt;i class="mdi mdi-alert"&gt;&lt;/i&gt; </code> inside <code> &lt; button class="btn btn-primary"&gt; </code>.Get classes for material icon <a href="material-icon.html">here</a>.
				</p>

				<div class="btn-group" role="group" aria-label="Basic example">
					<button type="button" class="btn btn-primary">
						<i class="mdi mdi-alert mr-1"></i> Left</button>
					<button type="button" class="btn btn-primary">
						<i class="mdi mdi-alert mr-1"></i> Middle</button>
					<button type="button" class="btn btn-primary">
						<i class="mdi mdi-alert mr-1"></i> Right</button>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Icon Button Group</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Icon Button Group add <code> &lt;i class="mdi mdi-alert"&gt;&lt;/i&gt; </code> inside <code> &lt; button class="btn btn-outline-primary"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
				</p>
				<div class="btn-group" role="group" aria-label="Basic example">
					<button type="button" class="btn btn-outline-primary">
						<i class="mdi mdi-alert mr-1"></i> Left</button>
					<button type="button" class="btn btn-outline-primary">
						<i class="mdi mdi-alert mr-1"></i> Middle</button>
					<button type="button" class="btn btn-outline-primary">
						<i class="mdi mdi-alert mr-1"></i> Right</button>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Button Toolbar pagination</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Combine sets of button groups into button toolbars for more complex components. Read Bootstrap
					documentaion for <a href="https://getbootstrap.com/docs/4.6/components/button-group/#button-toolbar" target="_blank"> more
						details.</a></p>

				<div class="btn-toolbar " role="toolbar" aria-label="Toolbar with button groups">
					<div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
						<button type="button" class="btn btn-primary">1</button>
						<button type="button" class="btn btn-primary">2</button>
						<button type="button" class="btn btn-primary">3</button>
						<button type="button" class="btn btn-primary">4</button>
					</div>

					<div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
						<button type="button" class="btn btn-primary">5</button>
						<button type="button" class="btn btn-primary">6</button>
						<button type="button" class="btn btn-primary">7</button>
					</div>

					<div class="btn-group mb-3" role="group" aria-label="Third group">
						<button type="button" class="btn btn-primary">8</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Outline Button Toolbar pagination</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Outline Button Toolbar pagination add class <code> .btn-outline-primary</code>.</p>

				<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
					<div class="btn-group mr-2 mb-3" role="group" aria-label="First group">
						<button type="button" class="btn btn-outline-primary">1</button>
						<button type="button" class="btn btn-outline-primary">2</button>
						<button type="button" class="btn btn-outline-primary">3</button>
						<button type="button" class="btn btn-outline-primary">4</button>
					</div>

					<div class="btn-group mr-2 mb-3" role="group" aria-label="Second group">
						<button type="button" class="btn btn-outline-primary">5</button>
						<button type="button" class="btn btn-outline-primary">6</button>
						<button type="button" class="btn btn-outline-primary">7</button>
					</div>

					<div class="btn-group mb-3" role="group" aria-label="Third group">
						<button type="button" class="btn btn-outline-primary">8</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Nesting</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/button-group/#nesting" target="_blank"> more
						details.</a></p>

				<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
					<button type="button" class="btn btn-primary">1</button>
					<button type="button" class="btn btn-primary">2</button>

					<div class="btn-group" role="group">
						<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
							Dropdown
						</button>

						<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Nesting Outline Button </h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Outline Button add class <code> .btn-outline-primary</code>.</p>

				<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
					<button type="button" class="btn btn-outline-primary">1</button>
					<button type="button" class="btn btn-outline-primary">2</button>

					<div class="btn-group" role="group">
						<button id="btnGroupDrop1" type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
							Dropdown
						</button>

						<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Vertical Buttons</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> Make a set of buttons appear vertically. Read Bootstrap documentaion <a href="https://getbootstrap.com/docs/4.6/components/button-group/#vertical-variation" target="_blank"> More Details.</a></p>

				<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
					<button type="button" class="btn btn-primary">Button</button>
					<button type="button" class="btn btn-primary">Button</button>
					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
							Dropdown
						</button>

						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-xl-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Vertical Outline Buttons</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Vertical Outline Buttons add class <code> .btn-outline-primary</code>.</p>

				<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
					<button type="button" class="btn btn-outline-primary">Button</button>
					<button type="button" class="btn btn-outline-primary">Button</button>

					<div class="btn-group" role="group">
						<button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-primary dropdown-toggle"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							Dropdown
						</button>

						<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
							<a class="dropdown-item" href="#">Dropdown link</a>
							<a class="dropdown-item" href="#">Dropdown link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
